<template>
    <view class="container">
        <!-- 页面内容 -->
        <view class="content">
            <!-- 当前余额 -->
            <view class="balance-card">
                <view class="balance-title">当前余额</view>
                <view class="balance-amount">¥ {{ balance }}</view>
            </view>

            <!-- 充值金额选项 -->
            <view class="section">
                <view class="section-title">选择充值金额</view>
                <view class="amount-options">
                    <view
                        v-for="(item, index) in amountOptions"
                        :key="index"
                        class="amount-option"
                        :class="{active: activeIndex === index}"
                        @click="selectAmount(item,index)"
                    >
                        <view>
                            <text>¥</text>
                            <text>{{ item.configValue }}</text>
                        </view>
                        <view class="f_s_14 m_t_5 c_red">额外送￥{{ item.configValue1 }}</view>
                    </view>
                </view>
            </view>

            <!-- 自定义金额 -->
            <view class="section">
                <view class="section-title">自定义金额</view>
                <view class="custom-amount">
                    <text class="prefix">¥</text>
                    <u-input
                        v-model="topUpAmount"
                        type="number"
                        placeholder="请输入充值金额"
                        :focus="isCustomFocus"
                        @focus="handleCustomFocus"
                        @blur="handleCustomBlur"
                    />
                </view>
            </view>

            <!-- 充值按钮 -->
            <view class="recharge-btn-container">
                <u-button
                    type="primary"
                    shape="circle"
                    :disabled="!canRecharge"
                    @click="handleRecharge"
                >
                    立即充值 ¥{{ rechargeAmount }}
                </u-button>
            </view>

            <!-- 充值协议 -->
            <!--            <view class="agreement">
                            <u-checkbox-group>
                                <u-checkbox
                                    v-model="agreeAgreement"
                                    shape="circle"
                                    activeColor="#07C160"
                                >
                                    我已阅读并同意<text class="agreement-link" @click="goProtocol(4)">《充值协议》</text>
                                </u-checkbox>
                            </u-checkbox-group>
                        </view>-->

            <view class="protocol">
                <u-checkbox-group v-model="checkboxValue" placement="column">
                    <u-checkbox :name="1"></u-checkbox>
                </u-checkbox-group>
                本人已阅读并签署
                <text class="link" @click="goProtocol(4)">《充值协议》</text>
            </view>
        </view>
    </view>
</template>

<script>
import {getByKeyApi, topUpApi} from "@/sheep/api";
import {xcxTopUp} from "@/sheep/utils/wxUtil";

export default {
    data() {
        return {
            businessConfigId:'',
            checkboxValue: [0],
            balance: 0, // 当前余额
            activeIndex: '',
            amountOptions: [], // 充值金额选项
            selectedAmount: null, // 选中的金额
            topUpAmount: '', // 自定义金额
            isCustomFocus: false, // 自定义金额输入框是否聚焦
            selectedMethod: 'wechat', // 选中的支付方式
            agreeAgreement: true // 是否同意协议
        }
    },
    computed: {
        // 计算充值金额
        rechargeAmount() {
            if (this.isCustomFocus || this.topUpAmount) {
                return this.topUpAmount || '0'
            }
            return this.selectedAmount || '0'
        },
        // 是否可以充值
        canRecharge() {
            const amount = Number(this.rechargeAmount)
            return amount > 0
        }
    },
    onLoad(params) {
        this.balance = params.amount
        this.getamountOptions()
    },
    methods: {
        async getamountOptions() {
            let res = await getByKeyApi("topup");
            this.amountOptions = res.data
        },
        goProtocol(type) {
            uni.navigateTo({
                url: "/pages/protocol/index?type=" + type
            })
        },
        // 选择充值金额
        selectAmount(item, index) {
            this.selectedAmount = item.configValue
            this.businessConfigId = item.businessConfigId
            this.activeIndex = index
            this.topUpAmount = ''
            this.isCustomFocus = false
        },
        // 选择支付方式
        selectPaymentMethod(method) {
            this.selectedMethod = method
        },
        // 自定义金额输入框聚焦
        handleCustomFocus() {
            this.businessConfigId = ''
            this.activeIndex = ''
            this.isCustomFocus = true
            this.selectedAmount = null
        },
        // 自定义金额输入框失焦
        handleCustomBlur() {
            this.isCustomFocus = false
        },
        // 处理充值
        handleRecharge() {
            if (!this.canRecharge) {
                uni.showToast({
                    title: '请选择充值金额',
                    icon: 'none'
                })
                return
            }
            if (!this.checkboxValue[0]) {
                uni.showToast({
                    title: "请同意充值协议",
                    icon: "none",
                });
                return;
            }
            uni.showLoading({
                title: '支付中...',
                mask: true
            })
            xcxTopUp(this.rechargeAmount, this.businessConfigId||null, "amount", "钱包充值").then(res => {
                uni.hideLoading()
                if (res) {
                    // 支付成功
                    uni.showToast({
                        title: `充值成功`,
                        icon: 'success'
                    })
                    setTimeout(() => {
                        uni.switchTab({
                            url: "/pages/mine/index"
                        });
                    }, 1500)
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.container {
    background-color: #f5f5f5;
    min-height: 100vh;
}

.content {
    padding: 20rpx;
}

.balance-card {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    border-radius: 16rpx;
    padding: 40rpx 30rpx;
    margin-bottom: 30rpx;
    color: #fff;
    box-shadow: 0 4rpx 12rpx rgba(255, 165, 0, 0.2);

    .balance-title {
        font-size: 28rpx;
        margin-bottom: 10rpx;
    }

    .balance-amount {
        font-size: 48rpx;
        font-weight: bold;
    }
}

.section {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 30rpx;
    margin-bottom: 30rpx;

    .section-title {
        font-size: 30rpx;
        font-weight: bold;
        margin-bottom: 30rpx;
        color: #333;
    }
}

.amount-options {
    display: flex;
    flex-wrap: wrap;
    margin: -10rpx;

    .amount-option {
        width: calc(50% - 20rpx);
        margin: 10rpx;
        padding: 30rpx 0;
        text-align: center;
        border: 1rpx solid #eee;
        border-radius: 12rpx;
        font-size: 36rpx;
        color: #333;
        transition: all 0.3s;

        text {
            &:first-child {
                font-size: 28rpx;
                margin-right: 6rpx;
            }
        }

        &.active {
            border-color: #FFB200;
            background-color: #fff1d0;
            //color: #FFB200;
        }
    }
}

.custom-amount {
    display: flex;
    align-items: center;
    border: 1rpx solid #eee;
    border-radius: 12rpx;
    padding: 0 20rpx;
    height: 90rpx;

    .prefix {
        font-size: 36rpx;
        color: #333;
        margin-right: 10rpx;
    }

    ::v-deep .u-input {
        flex: 1;
        font-size: 36rpx;
    }
}

.payment-methods {
    .payment-method {
        display: flex;
        align-items: center;
        padding: 25rpx 0;
        border-bottom: 1rpx solid #f5f5f5;

        &:last-child {
            border-bottom: none;
        }

        .method-icon {
            width: 50rpx;
            height: 50rpx;
            margin-right: 20rpx;
        }

        .method-name {
            flex: 1;
            font-size: 30rpx;
            color: #333;
        }

        &.active {
            .method-name {
                color: #07C160;
            }
        }
    }
}

.recharge-btn-container {
    margin: 40rpx 0;

    ::v-deep .u-btn {
        height: 90rpx;
        font-size: 32rpx;
    }
}

.agreement {
    text-align: center;
    font-size: 24rpx;
    color: #999;

    .agreement-link {
        color: #07C160;
    }

    ::v-deep .u-checkbox {
        justify-content: center;
    }
}

.protocol {
    margin-top: 40rpx;
    font-size: 24rpx;
    color: #999;
    display: flex;

    .link {
        color: #2979ff;
    }
}
</style>
